<template>
  <div>
    <el-form ref="formRef" label-width="labelWidth" status-icon :rules="formColumnsRule" size="formSize">
      <!--<el-form-item label="菜单名" prop="name">-->
        <!--<el-input type="text" v-model="addData.name" autocomplete="off"></el-input>-->
      <!--</el-form-item>-->
      <!--<el-form-item label="路径" prop="url">-->
        <!--<el-input v-model="addData.url"></el-input>-->
      <!--</el-form-item>-->
      <!--<el-form-item label="类型">-->
        <!--<el-select v-model="addData.type">-->
          <!--<el-option label="菜单" value="1"></el-option>-->
          <!--<el-option label="权限" value="0"></el-option>-->
        <!--</el-select>-->
      <!--</el-form-item>-->
      <el-form-item v-for="(item,index) in formColumns" :label="item.label" :prop="item.prop" :key="index">
        <el-input type="text" v-model="formColumns.prop" v-if="formColumns.dataType === 'varchar'" autocomplete="off"></el-input>
        <el-date-picker
          v-else-if="formColumns.dataType === 'datetime'"
          v-model="formColumns.prop"
          :type="datePicker.type"
          :start-placeholder="datePicker.startPlaceholder"
          :end-placeholder="datePicker.endPlaceholder"
          :size="datePicker.size"
          :format="datePicker.format"
          :default-time="datePicker.defaultTime">
        </el-date-picker>
      </el-form-item>
    </el-form>
    <span slot="footer">
      <el-button type="text" @click="handleCancel('add')"><i class="fa fa-remove fa-fw">&nbsp;</i>取 消</el-button>
      <el-button type="text" @click="handleOk(addData,'add')"><i class="fa fa-plus fa-fw">&nbsp;</i>确 定</el-button>
    </span>
  </div>
</template>

<script>
export default {
  name: 'index',
  props: {
    formType: {
      type: String,
      default: 'add'
    },
    formRef: {
      type: String,
      default: this.formType + 'Form'
    },
    formColumns: {
      type: Array
    },
    formColumnsRule: {
      type: Object
    },
    formSize: {
      type: String,
      default: 'small'
    },
    labelWidth: {
      type: String,
      default: '80px'
    },
    datePicker: {
      type: Object,
      default: function () {
        return {
          type: 'daterange',
          startPlaceholder: '开始日期',
          endPlaceholder: '结束日期',
          size: 'small',
          format: 'yyyy-MM-dd HH:mm:ss',
          defaultTime: ['00:00:00', '23:59:59']
        }
      }
    }
  },
  data () {
    return {
    }
  }
}
</script>

<style scoped>

</style>
